| Axios request 封装最佳实践 | 您所在的位置：网站首页 › react axios封装api统一管理 › Axios request 封装最佳实践 |
Axios request 封装最佳实践
|
在实际项目中，我们通常需要封装 Axios 请求，这样可以更方便地处理请求和响应，也可以统一处理请求错误等，本文将介绍 Axios request 封装的一些知识。  Axios 官网首页封装思想我们可以将 Axios 封装成一个请求函数，传入请求配置参数，它负责发起请求。然后在请求成功时 resolve 返回数据，请求失败时 reject 返回错误。这样就可以通过 promise 方式非常方便地使用它。 基本结构如下: function request(options) { return new Promise((resolve, reject) => { axios(options) .then(res => { resolve(res.data) }) .catch(err => { reject(err) }) }) }我们还可以接着封装 get、post 等方法: function get(url, params) { return request({ method: 'get', url, params }) } function post(url, data) { return request({ method: 'post', url, data }) }这样我们就可以直接调用get和post方法发起对应请求了。 处理重复逻辑我们可以把一些重复的逻辑抽离出来，比如设置 baseURL: function request(options) { const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 5000 }) options = {...options, instance} // 使用创建的实例 return new Promise((resolve, reject) => { instance(options) .then(res => { resolve(res.data) }) .catch(err => { reject(err) }) }) }这样可以避免每次请求都要设置这些通用配置。 请求和响应拦截器我们可以使用拦截器在发送每个请求前修改请求数据，以及在接收响应后统一处理响应结果。 // 请求拦截器 instance.interceptors.request.use( config => { // 处理请求前的逻辑... return config }, error => { // 请求错误处理 return Promise.reject(error) } ) // 响应拦截器 instance.interceptors.response.use( response => { // 处理响应数据 return response }, error => { // 处理响应错误 return Promise.reject(error) } )拦截器让我们可以更加灵活自如地控制请求流程。 错误处理我们可以通过 catch 来统一处理请求的错误。 function request(options) { return new Promise((resolve, reject) => { instance(options) .then(res => { resolve(res.data) }) .catch(err => { // 错误处理 reject(err) }) }) } request(options) .then(res => { // 处理响应数据 }) .catch(err => { // 统一处理请求错误 })这样可以避免每个请求都要独立处理错误的问题。 请求取消有时候我们需要取消一个已发出的请求，Axios支持通过传递一个cancel token来取消请求: const CancelToken = axios.CancelToken const source = CancelToken.source() request({ ..., cancelToken: source.token }) // 取消请求 source.cancel('Cancel request')这样我们可以更加灵活地控制请求。 案例下面是一个请求实例，展示了如何使用上面封装的 request 方法: import { get, post } from './request' get('/user', { params: { id: 12345 }}) .then(res => { console.log(res) }) .catch(err => { console.error(err) }) post('/user', { user: { name: 'John' }}) .then(res => { console.log(res) }) .catch(err => { console.error(err) })通过 get 和 post 方法可以非常方便地发起对应请求，并通过 promise 处理响应结果。 提示与技巧将 Axios 封装成一个 request 方法，传入配置参数发起请求抽离公共配置代码如 baseURL 等使用拦截器处理请求和响应通过 catch 统一处理错误支持取消请求使用 Apifox 来 Mock 数据Apifox 是一个比 Postman 更强大的接口测试工具，Apifox = Postman + Swagger + Mock + JMeter，Apifox 支持调试 http(s)、WebSocket、Socket、gRPC、Dubbo 等协议的接口，并且集成了 IDEA 插件。在后端人员写完服务接口时，测试阶段可以通过 Apifox 来校验接口的正确性，图形化界面极大的方便了项目的上线效率。 更为重要的是，Apifox 能够 Mock 数据，其集成了 Mock.js 库，允许你自定义规则，并且可以编写脚本，强大的 Mock 功能可以让前端开发人员不再苦苦等待后端提供接口，自己就能提前造各种各样的数据出来，可视化操作让你点点鼠标就能生成可观的人性化数据。 立即体验 Apifox Apifox 的 Mock 功能 使用 Apifox 调试接口总结正确地封装 Axios 请求可以让我们更方便地调用接口，减少重复代码，并统一处理请求错误。上面提到的都是一些比较常见的封装方式，可以根据实际需求进行灵活调整。 知识扩展： Axios 如何取消请求？2 种方法助你掌握请求的控制权Axios 的响应拦截器如何使用？响应拦截器的用法以及实践案例参考： Axios中文文档：https://www.kancloud.cn/yunye/axios/234845 |
【本文地址】